<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>电影票_在线选座_影视</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/CinemaAddressName.css">
<link type="text/css" href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="js/CinemaAddressName.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script src="layui/layui.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".main_visual").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
	},function(){
		$("#btn_prev,#btn_next").fadeOut()
	});
	
	$dragBln = false;
	
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e){
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_image a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 1400);
	
	$(".main_visual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},1400);
	});
	
	$(".main_image").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 1400);
	});
	
});
</script>
<style type="text/css">

#ksgp{
	width: 180px;
	height:90px;
	margin: 118px 35px;
	
	
}

#xzgp{
	width:180px;
	height:40px;
	background: #4f8ce4;/*#2d77e3*/
	margin: -95px 35px;
	color: white;
	text-align:center; line-height:40px;
}

#xzgp:HOVER{
	background:#2d77e3;
	cursor:pointer;
}

#xzdy,#xzyy:HOVER{
	cursor:pointer;
}
#xzdy{
	width:180px;
	height: 30px;
	line-height:30px;
	font-size:13px;
	overflow: hidden;
	border-bottom-color: black;
	overflow: hidden;
}
#xzdy1{
overflow: hidden;
}
#xzyy{
	width: 180px;
	height: 60px;
	line-height:90px;
	border:1px solid ;
	border-left: white;
	border-right: white;
	font-size:13px;
	overflow: hidden;
}

#dsj1{
	position: absolute;
	top:213px;
	left: 1085px;
}
#dsj2{
	position: absolute;
	top:273px;
	left: 1085px;
}
#dyselect{
	width: 180px;
	height:250px;
	position: absolute;
	background: white;
	display: none;
	z-index: 1;
	border:solid 1px;
	overflow:auto;
}
#yyselect{
	width: 447px;
	height:240px;
	position: absolute;
	background: white;
	top:299px;
	right: 200px;
	display: none;
	z-index: 1;
	border:solid 1px;
	overflow:auto;
}
.dyitem{
	line-height:20px;
	margin: 10px 8px;
	width: 140px;
	height: 20px;
	padding: 3px 0px 3px 5px;
	overflow: hidden;
}
#xzdy2,#xzyy2{
	padding-left: 8px;
	overflow: hidden;
}
#yytable{
	height: auto;
	line-height:3em;
	margin-left: 20px;
	
}
.yyitem{
	display:inline-block;
	
	
	width: auto;
	margin-left: 6px;
	height:25px;
	line-height:25px;
	padding: 0 5px;
}
.dyitem:HOVER{
	background:#2d77e3;
	color:white;
	cursor:pointer;
}
.yyitem:HOVER{
	background:#2d77e3;
	color:white;
	cursor:pointer;
}
.piwn_1{
	margin: 8px 8px;
}
.piwn_2{
	border: solid 1px;
	border-color: #DDE3E3;
}
.piwn_3{
	background: #4F8CE4;
	margin: 5px 5px;
	padding:5px 5px;
	color: white;
}
#icon1,#icon2{
	visibility: hidden;
}

</style>
</head>
<body>
<!--导航  -->
<div>
<div class="nav">
	<div id="Navigation1"></div>
	<div id="Navigation2"><img id="picture1" src="img/xing.png">星空影票</div>
    <div class="nav_list">       
        <ul>
            <li class="nav_cur"><a href="">首页</a></li>
            <li><a href="subpage/CinemaAddressName.jsp">影院</a></li>
            <li class="sideline"></li>
        </ul>
    </div>
</div>
</div>

<div id="lunbokuang">
<!-- 轮播 -->
<div class="main_visual">
	<div class="flicking_con">
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
	</div>
	<div class="main_image">
		<ul>
			<li><a href=""><img src="img/img_main_1.jpg" width="100%" height="366px"/></a></li>
			<li><a href=""><img src="img/img_main_2.jpg" width="100%" height="366px"/></a></li>
			<li><a href=""><img src="img/img_main_3.jpg" width="100%" height="366px"/></a></li>
			<li><a href=""><img src="img/img_main_4.jpg" width="100%" height="366px"/></a></li>
			<li><a href=""><img src="img/img_main_5.jpg" width="100%" height="366px"/></a></li>
		</ul>
		<a href="javascript:;" id="btn_prev"></a>
		<a href="javascript:;" id="btn_next"></a>
	</div>
</div>
<div id="xuanpiaoright">
  
 <div id="ksgp">
 	<div id="xzdy">
 		<div id="xzdy1"><span id="xzdy2">选择电影</span><div id="dsj1"><img id="icon1" src="img/bc.png" width="20px" height="20px"><img src="img/dsj.png" width="18px" height="18px"></div></div>
 		<div id="dyselect">
 		<ul>
 			<li class="dyitem">测试数据1测试数据1</li>
 			<li class="dyitem">测试数据2</li>
 			<li class="dyitem">测试数据3</li>
 			<li class="dyitem">测试数据4</li>
 			<li class="dyitem">测试数据5</li>
 			<li class="dyitem">测试数据6</li>
 			<li class="dyitem">测试数据7</li>
 			<li class="dyitem">测试数据8</li>
 			<li class="dyitem">测试数据9</li>
 			<li class="dyitem">测试数据10</li>
 			<li class="dyitem">测试数据11</li>
 			<li class="dyitem">测试数据12</li>
 		</ul>
 		</div>
 	</div>
 	<div id="xzyy">
 		<span id="xzyy2">选择影院</span><div id="dsj2"><img id="icon2" src="img/bc.png" width="20px" height="20px"><img src="img/dsj.png" width="18px" height="18px"></div>
 		<div id="yyselect">
 			<table id="yytable"  width="400px" >
 				<tr>
 					<td width="15%" valign="top">香洲区：</td>
 					<td width="85%" height="20px" style="padding-top: 5px;">
 						<span class="yyitem">星帝影城(中兴中路店)星帝影城(中兴中路店)</span>
	 					<span class="yyitem">完美世界影城(17.5旺角店)</span>
	 					<span class="yyitem">天智国际影城(斗门店)</span>
	 					<span class="yyitem">中影火星湖影城(柠溪店)</span>
	 					<span class="yyitem">前山电影院</span>
	 					<span class="yyitem">星河国际电影城</span>
	 					<span class="yyitem">中影国际影城(华发商都店)</span>
	 					<span class="yyitem">国艺都会影城</span>
	 					
 					<td>
 					
 				</tr>
 				<tr>
 					<td width="15%" valign="top">斗门区：</td>
 					<td width="85%" height="20px" style="padding-top: 5px;">
 						<a class="yyitem">星帝影城(中兴中路店)</a>
	 					<a class="yyitem">完美世界影城(17.5旺角店)</a>
	 					<a class="yyitem">天智国际影城(斗门店)</a>
	 					<a class="yyitem">中影火星湖影城(柠溪店)</a>
	 					<a class="yyitem">前山电影院</a>
	 					<a class="yyitem">星河国际电影城</a>
	 					<a class="yyitem">中影国际影城(华发商都店)</a>
	 					<a class="yyitem">国艺都会影城</a>
	 					
 					<td>
 					
 				</tr>
 				
 			</table>
 		</div>
 	</div>
  </div>
  <div id="xzgp">现在购票</div>
</div>
</div>


<div id="neirong">
     <div class="neirong_1" id="a1">
       <div id="neirong-1">
           <div id="neirong_1_1" onclick="a()">正在热映</div>
           <div id="neirong_1_2" onclick="b()">即将上映</div>
       </div>  
       <div id="neirong-2"></div>
       
      
       <div id="b1" > 
       <div class="dianyinglan">
<c:forEach items="${zzryList }" var="zl"> 
          <div id="dianying_1">
              <div class="dianying_1_1"><img  src="img/${zl.img }" width="150px" height="215px" ></div>
              <div class="dianying_1_2">
                   <div class="dianyingming"><a href="#" class="dianyingName">${zl.name }</a></div>
                   <div class="pingfeng">评分:${zl.score }</div>
                   <div class="jieshao">
                       <ul>
                          <li class="jieshaoli">片长：${zl.movieTime }</li>
                          <li class="jieshaoli">地区：${zl.nation }</li>
                          <li class="jieshaoli">类型：${zl.classId }</li>
                          <li class="jieshaoli">导演：${zl.director }</li>
                          <li class="jieshaoli">主演：${zl.mainActor }</li>
                       </ul>
                   </div>
                   <div class="dingpiao">选座购票</div>
              </div>                
              
          </div>
</c:forEach>

          <!-- <div id="dianying_2">
              <div class="dianying_1_1">图片</div>
              <div class="dianying_1_2">
                   <div class="dianyingming"><a href="#" class="dianyingName">电影名</a></div>
                   <div class="pingfeng">评分</div>
                   <div class="jieshao">
                       <ul>
                          <li class="jieshaoli">片长:</li>
                          <li class="jieshaoli">地区:</li>
                          <li class="jieshaoli">类型:</li>
                          <li class="jieshaoli">导演:</li>
                          <li class="jieshaoli">主演:</li>
                       </ul>
                   </div>
                   <div class="dingpiao">选座购票</div>
                   </div>
                   
          </div> -->

       </div>
      

       </div>
        
       <div id="b2" >  
     

       <div class="dianyinglan">
         <c:forEach items="${jjsyList }" var="jl"> 
          <div id="dianying_1">
              <div class="dianying_1_1"><img  src="img/${jl.img }" width="150px" height="215px" ></div>
              <div class="dianying_1_2">
                   <div class="dianyingming"><a href="#" class="dianyingName">${jl.name }</a></div>
                   <div class="pingfeng">评分:${jl.score }</div>
                   <div class="jieshao">
                       <ul>
                          <li class="jieshaoli">片长：${jl.movieTime }</li>
                          <li class="jieshaoli">地区：${jl.nation }</li>
                          <li class="jieshaoli">类型：${jl.classId }</li>
                          <li class="jieshaoli">导演：${jl.director }</li>
                          <li class="jieshaoli">主演：${jl.mainActor }</li>
                       </ul>
                   </div>
                   <div class="dingpiao">选座购票</div>
              </div>
          </div>
         </c:forEach>
          
         <!--  <div id="dianying_2">
              <div class="dianying_1_1">电影图片</div>
              <div class="dianying_1_2">
                   <div class="dianyingming"><a href="#" class="dianyingName">三生三世十里桃花</a></div>
                   <div class="pingfeng">评分</div>
                   <div class="jieshao">
                       <ul>
                          <li class="jieshaoli">片长:123</li>
                          <li class="jieshaoli">地区:中国大陆</li>
                          <li class="jieshaoli">类型:动作</li>
                          <li class="jieshaoli">导演:吴京</li>
                          <li class="jieshaoli">主演:吴京/弗兰克·格里罗/吴..</li>
                       </ul>
                   </div>
                   <div class="dingpiao">选座购票</div>
                   </div>
          </div> -->
       </div>
  
       </div>    
     </div>
     <div id="neirong_2">
          <div id="righttitle">
              <div id="remengyingyuan">热门影院</div>
          </div>
          <div id="rightfenjiexian"></div>
          <div id="bttom">
              <div id="bttom_1">
                 <input id="input_1" type="text" placeholder="输入影院名"><input id="input_2" type="button" value="影院搜索">
              </div>
                 <div id="diqu">
                    <a class="a_1" href="#" >香洲区</a> <a class="a_1" href="#">斗门区</a> <a class="a_1" href="#">金湾区</a>
                 </div>
              <div id="fengexian"></div>

         
              <c:forEach items="${cinemaList }" var="cl"> 
              <div id="yingyuan_1">
                  <div id="yingyuan_1_1"><a href="#" id="yingcheng">${cl.name }</a></div>
                  <div id="yingyuan_1_2">地址:${cl.addr}</div>
              </div>
              <div id="fengexian_1"></div>
            </c:forEach>
    
          </div>
          
     </div>
</div>
<div id="fengedian"></div>
<div id="dibu"></div>
</body>


<script type="text/javascript">
	$(function(){
		$("#xzdy").click(function(){
			$("#yyselect").animate({
			      height:'hide'
			 });
			$("#dyselect").slideToggle("slow");
		});
		$("#xzyy").click(function(){
			$("#yyselect").slideToggle("slow");
		});
		
		$(".dyitem").click(function(){
			$("#xzdy2").text($(this).text());
			$("#icon1").css("visibility","visible");
		});
		$("#icon1,#icon2").mouseenter(function(){
			$(this).attr("src","img/lc.png");
		});
		$("#icon1,#icon2").mouseleave(function(){
			$(this).attr("src","img/bc.png");
		});
		$("#icon1").bind("click",function(event){
			$("#xzdy2").text("选择电影");
			$(this).css("visibility","hidden");
			 event.stopPropagation();
		});
		$("#icon2").bind("click",function(event){
			$("#xzyy2").text("选择影院");
			$(this).css("visibility","hidden");
			 event.stopPropagation();
		});
		$(".yyitem").click(function(){
			$("#xzyy2").text($(this).text());
			$("#icon2").css("visibility","visible");
		});
		$("#xzgp").click(function(){
			var dy = $("#xzdy2").text();
			var yy = $("#xzyy2").text();
			if(dy == '选择电影'){
				layer.msg("亲，您还没选择电影哦");
			}else{
				if(yy == '选择影院'){
					layer.msg("亲，您还没选择影院哦");
				}else{
					layer.open({
						  type:'1',
						  title: '在线选座-选择观影场次',
						  area:['770px','630px'],
						  content: '<div class="piwn_1">影片：'+dy+'</div><div class="piwn_1">影院：'+yy+'</div><div class="piwn_1">选择日期：</div><div align="center"><table align="center" class="piwn_2" cellpadding="0" cellspacing="0" width="600px"><tr align="center" bgcolor="#DDE3E3"><th>放映时间</th><th>语言/版本</th><th>放映厅</th><th>在线选座价</th><th>在线选座</th></tr><tr align="center"><td>测试</td><td>测试</td><td>测试</td><td>测试</td><td><input type="button" value="选座购票" class="piwn_3" ></td></tr></table></div>'
						}); 
				}
			}	  
		});
	});
</script>
<script>
layui.use('layer', function(){
	  var layer = layui.layer;
	  
	});              
	      
</script>
</html>